<!-- 正向追溯 基础信息 -->
<template>
  <div>
    <div :id="id" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo(type)">
          <h4>{{ title }}</h4>
          <i :class="[isArrowDown ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ compTableData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo" v-if="isArrowDown">
      <!-- 报废信息 -->
      <avue-crud v-if="id == 'scrapInfo'" :option="compTableConfig" :data="compTableData" ref="scrapInfo" @row-dblclick="handleRowClick">
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-view" size="small" type="text" @click="scrapInfoDetail(row)">详情</el-button>
        </template>
        <template slot-scope="{ row }" slot="scrapType">
          <span v-if="row.scrapType == 'PRODUCT'">产品报废</span>
          <span v-else>维修报废</span>
        </template>
      </avue-crud>
      <!-- 发货信息 -->
      <avue-crud v-else-if="id == 'deliverGoodsInfo'" :option="compTableConfig" :data="compTableData" ref="deliverGoodsInfo" @row-dblclick="handleRowClick">
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-view" size="small" type="text" @click="deliverGoodsInfoDetail(row)">查看发货单</el-button>
        </template>
      </avue-crud>
      <!-- 检验信息 -->
      <avue-crud v-else-if="id === 'inspcetInfo'" :option="compTableConfig" :data="compTableData" ref="inspcetInfo">
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" @click="viewReport(row.documentType, row)" icon="el-icon-view" size="small">查看检验报告</el-button>
        </template>
      </avue-crud>
      <avue-crud v-else :option="compTableConfig" v-model="form" :before-open="beforeOpen" :data="compTableData" :ref="id" @row-dblclick="handleRowClick">
        <!-- 工艺路线 -->
        <template v-if="id == 'processRouteInfo'" slot-scope="{ row }" slot="isPassed">
          <span v-if="row.isPassed" class="text-green">是</span>
          <span v-else class="text-red">否</span>
        </template>

        <!-- 过站信息 -->
        <template v-if="id == 'passingStationInfo'" slot-scope="{ row }" slot="passedResult">
          <span v-if="row.passedResult == 'PASS'" class="text-green">OK</span>
          <span v-else class="text-red">NG</span>
        </template>
        <template v-if="id == 'passingStationInfo'" slot-scope="{ row }" slot="isSkip">
          <span v-if="row.isSkip" class="text-green">是</span>
          <span v-else class="text-red">否</span>
        </template>
        <template v-if="id == 'passingStationInfo'" slot-scope="{ row }" slot="isAutoPassed">
          <span v-if="row.isAutoPassed" class="text-green">是</span>
          <span v-else class="text-red">否</span>
        </template>

        <!-- 不良信息 -->
        <template v-if="id == 'badInfo'" slot-scope="{ row }" slot="confirmationResults">
          <span v-if="row.confirmationResults == 'RELIEVE'">解除不良</span>
          <span v-if="row.confirmationResults == 'REPAIR'">维修</span>
          <span v-if="row.confirmationResults == 'SCRAP'">报废</span>
        </template>

        <!-- 维修信息 -->
        <template v-if="id == 'repairInfo'" slot-scope="{ row }" slot="incomingType">
          <span v-if="row.incomingType == 'AUTO'">自动</span>
          <span v-if="row.incomingType == 'MANUAL'">手动</span>
        </template>
        <template v-if="id == 'repairInfo' || id === 'badInfo'" slot-scope="{ row }" slot="results">
          {{ row.results }}
          <!--          <span v-if="row.results == '1'" class="text-red">不合格</span>-->
          <!--          <span v-else-if="row.results == '0'" class="text-green">合格</span>-->
          <!--          <span v-else class="text-yellow">维修中</span>-->
        </template>
        <template v-if="id == 'repairInfo'" slot-scope="{ row }" slot="attachmentsForm">
          <div class="img-list">
            <div style="margin: 5px 10px; display: flex; flex-direction: column" v-for="(item, index) in form.imageList || []" :key="index">
              <img style="width: 100px; height: 100px" :src="item.link" @click="openPreview('0', item.link)" />
              <button type="button" :class="`el-button el-button--text el-button--small downLoadFile${index}`" @click="handleDownload(item.link)">
                <i class="el-icon-download"></i><span>下载</span>
              </button>
            </div>
          </div>
        </template>

        <!-- 测试信息 -->
        <template v-if="id == 'collectionInfo'" slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-view" size="small" type="text" @click="viewDetail(row)">详情</el-button>
        </template>
      </avue-crud>
    </transition>
  </div>
</template>
<script>
import { getRepiarDetail } from '@/api/product/forward-trace-back-to';
export default {
  name: 'ForwardTraceBackToComp',
  props: {
    cacheWorkOrderNo: {
      type: String
    },
    id: {
      type: String
    },
    title: {
      type: String
    },
    type: {
      type: String
    },
    isArrowDown: {
      type: Boolean
    },
    tableData: {
      type: Array,
      default: () => []
    },
    tableConfig: {
      type: Object,
      default: () => {}
    },
    form: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    tableData: {
      handler(value) {
        this.compTableData = JSON.parse(JSON.stringify(value));
      },
      deep: true,
      immediate: true
    },
    tableConfig: {
      handler(value) {
        this.compTableConfig = JSON.parse(JSON.stringify(value));
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      compTableConfig: {},
      compTableData: [],
      form: {}
    };
  },
  methods: {
    toggleInfo(type) {
      this.$emit('toggleMenu', type);
    },
    scrapInfoDetail(row) {
      this.$emit('scrapInfoDetail', row);
    },
    deliverGoodsInfoDetail(row) {
      this.$emit('deliverGoodsInfoDetail', row);
    },
    beforeOpen(done, type) {
      this.$emit(
        'beforeOpen',
        {
          type,
          id: this.id,
          form: this.form
        },
        function cb() {
          done();
        }
      );
    },
    openPreview(index = 0, link) {
      this.$ImagePreview([{ url: link }], index, {
        closeOnClickModal: false
      });
    },
    handleDownload(link) {
      window.open(`${link}`);
    },
    viewDetail(row) {
      this.$emit('openCollectDetail', row);
    },
    handleRowClick(row, event, column) {
      switch (this.id) {
        // 工单信息
        case 'workOrderInfo':
          this.$router.push({
            path: '/product/workorder',
            query: {
              workOrderNo: encodeURIComponent(row.workOrderNo)
            }
          });
          break;
        // 工艺路线
        case 'processRouteInfo':
          this.$router.push({
            path: '/product/workorderRoute',
            query: {
              workOrderNo: encodeURIComponent(this.cacheWorkOrderNo)
            }
          });
          break;
        // 过站信息
        case 'passingStationInfo':
          this.$router.push({
            path: '/product/missStationRecordQuery',
            query: {
              workOrderNo: encodeURIComponent(row.workOrderNo),
              sequenceNumber: encodeURIComponent(row.sequenceNumber),
              passedDateTime: encodeURIComponent(row.passedDateTime),
              passedResult: encodeURIComponent(row.passedResult)
            }
          });
          break;

        // 不良信息
        case 'badInfo':
          this.$router.push({
            path: '/report/bad-record-query',
            query: {
              sequenceNumber: encodeURIComponent(row.sequenceNumber),
              objectType: encodeURIComponent(row.sequenceNumberType || 'PRODUCT'),
              confirmTime: encodeURIComponent(row.createTime)
            }
          });
          break;
        // 维修信息
        case 'repairInfo':
          this.$router.push({
            path: '/report/maintenance-record-query',
            query: {
              sequenceNumber: encodeURIComponent(row.sequenceNumber),
              objectType: encodeURIComponent(row.sequenceNumberType || 'PRODUCT')
            }
          });
          break;

        // 报废信息
        case 'scrapInfo':
          this.$router.push({
            path: '/report/scrap-record-query',
            query: {
              sequenceNumber: encodeURIComponent(row.sequenceNumber),
              createTime: encodeURIComponent(row.scrapTime),
              scrapType: encodeURIComponent(row.scrapType)
            }
          });
          break;
        // 发货信息
        case 'deliverGoodsInfo':
          this.$router.push({
            path: '/warehouse/deliveryPlan',
            query: {
              no: encodeURIComponent(row.no)
            }
          });
          break;
        // 采集信息
        case 'collectionInfo':
          this.$router.push({
            path: '/report/test-data-collection',
            query: {
              sequenceNumber: encodeURIComponent(row.sequenceNumber),
              createTime: encodeURIComponent(row.createTime),
              machineCode: encodeURIComponent(row.machineCode),
              result: encodeURIComponent(row.result)
            }
          });
          break;

        default:
          break;
      }
    },
    viewReport(documentType, row = 'IPQC') {
      let reportTemplateName = this._get(row, 'reportTemplateName', '');
      switch (documentType) {
        case 'IPQC':
          window.open(`${this.website.reportUrl}/preview?_u=blade-${reportTemplateName}&qcId=${row.id}`);
          break;
        case 'FQC':
          window.open(`${this.website.reportUrl}/preview?_u=blade-${reportTemplateName}&qcId=${row.id}`);
          break;
        case 'OQC':
          window.open(`${this.website.reportUrl}/preview?_u=blade-${reportTemplateName}&qcId=${row.id}`);
          break;
        case 'FAI':
          window.open(`${this.website.reportUrl}/preview?_u=blade-${reportTemplateName}&qcId=${row.id}`);
          break;
        case 'LAI':
          window.open(`${this.website.reportUrl}/preview?_u=blade-${reportTemplateName}&qcId=${row.id}`);
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: center;
  height: 35px;
  .titleLeft {
    display: flex;
    align-items: center;
    .titleName {
      user-select: none;
      display: flex;
      align-items: center;
      cursor: pointer;
      .arrowRight {
        transform: rotate(0);
        transition: all 0.2s;
        &.arrowDown {
          transform: rotate(90deg);
          transition: all 0.2s;
        }
      }
    }
  }
  span {
    color: #0995bb;
  }
}
::v-deep .el-table {
  margin-bottom: 25px;
}
::v-deep .el-form-item__content {
  line-height: 32px;
}

.forwardTraceBackTo-enter-active,
.forwardTraceBackTo-leave-active {
  transition: opacity 0.2s;
}
.forwardTraceBackTo-enter,
.forwardTraceBackTo-leave-to {
  opacity: 0;
}
.img-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
